<template>
  <div class="mod-discountInfo">
    <el-form
      :model="dataForm"
      ref="dataForm"
      :rules="dataRule"
      @keyup.enter.native="dataFormSubmit()"
      label-width="120px"
      style="width: 700px"
    >
      <el-form-item
        :label="this.$i18n.t('group.actName')"
        prop="discountName"
        :rules="[{ required: true, message: $t('publics.noNull') }]"
      >
        <el-input
          v-model="dataForm.discountName"
          maxlength="50"
          show-word-limit
          :placeholder="this.$i18n.t('group.actName')"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="this.$i18n.t('marketing.mobiltyDiagram') + '（710*260）'"
        prop="mobilePic"
      >
        <img-upload v-model="dataForm.mobilePic"></img-upload>
        <span>{{ $t("marketing.suggest1") }}</span>
      </el-form-item>
      <el-form-item
        :label="this.$i18n.t('marketing.pcActivityListChart') + '（590*240）'"
        prop="pcPic"
      >
        <img-upload v-model="dataForm.pcPic"></img-upload>
      </el-form-item>
      <el-form-item
        :label="this.$i18n.t('marketing.pcActiviroundMap') + '（1200*360）'"
        prop="pcBackgroundPic"
      >
        <img-upload v-model="dataForm.pcBackgroundPic"></img-upload>
      </el-form-item>
      <el-form-item :label="this.$i18n.t('marketing.activTime')">
        <el-col :span="10">
          <el-form-item prop="startTime">
            <el-date-picker
              v-model="dataForm.startTime"
              type="datetime"
              :placeholder="this.$i18n.t('live.chooseStartDate')"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="1">-</el-col>
        <el-col :span="10">
          <el-form-item prop="endTime">
            <el-date-picker
              v-model="dataForm.endTime"
              type="datetime"
              :placeholder="this.$i18n.t('live.chooseEndDate')"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item
        :label="this.$i18n.t('marketing.typeOfActivity')"
        size="mini"
        prop="discountRule"
      >
        <el-radio-group
          v-model="dataForm.discountRule"
          @change="changeDiscountRule"
          :disabled="!!dataForm.discountId"
        >
          <el-radio :label="0">{{ $t("marketing.fullMoneoney") }}</el-radio>
          <!-- <el-radio :label="1">满件减钱</el-radio> -->
          <el-radio :label="2">{{
            $t("marketing.fullMoneyDiscount")
          }}</el-radio>
          <el-radio :label="3">{{ $t("marketing.fullDiscount") }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        :label="$t('marketing.typeOfExemption')"
        size="mini"
        prop="discountType"
        v-if="dataForm.discountRule === 0 || dataForm.discountRule === 1"
      >
        <el-radio-group
          v-model="dataForm.discountType"
          @change="discountTypeChange"
        >
          <el-radio :label="0">{{
            $t("marketing.decreaseOestLevel")
          }}</el-radio>
          <el-radio :label="1">{{ $t("marketing.decreaeryTime") }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 卡片 START -->
      <el-form-item :label="$t('marketing.offerContent')">
        <el-card
          class="box-card"
          v-for="(discountItem, index) in dataForm.discountItems"
          :key="discountItem.discountItemId"
          style="margin-bottom: 30px"
        >
          <div slot="header" class="clearfix" v-if="!dataForm.discountType">
            <span>{{ $t("marketing.activityLevel") }} {{ index + 1 }}</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="deleteActivityClass(index)"
              v-if="dataForm.discountItems.length > 1"
              >{{ $t("text.delBtn") }}</el-button
            >
          </div>
          <el-form-item
            class="text item"
            :label="$t('marketing.conditionsOfUse')"
            style="margin-bottom: 20px" 
            :label-width="$t('language') === 'English' ? '150px' : '100px' "
            :rules="[{ required: true, message: $t('publics.noNull') }]"
          >
            <span v-if="dataForm.discountType === 1">{{
              $t("marketing.everyFull")
            }}</span>
            <span v-else
              >&nbsp;&nbsp;&nbsp;&nbsp;{{ $t("marketing.full") }}</span
            >
            <el-input
              type="number"
              size="small"
              v-model="discountItem.needAmount"
              style="width: 200px"
              @change="checkNumber(index, 1)"
            >
              <template slot="append">{{ discountItemTexts[0] }}</template>
            </el-input>
           <div class="pleaseEnteThan"> {{ $t("live.pleaseEnteThan0") }} </div>
            <el-tooltip
              class="item"
              effect="light"
              placement="top"
              v-if="dataForm.discountType === 0"
            >
              <div slot="content">{{ $t("marketing.conditionsOfUseIn") }}</div>
              <span>
                <i class="el-icon-question"></i>
              </span>
            </el-tooltip>
          </el-form-item>
          <el-form-item
            class="text item"
            :label="$t('marketing.discountedPrice')"
            :rules="[{ required: true, message: $t('publics.noNull') }]"
          >
            <span v-if="dataForm.discountRule < 2"
              >&nbsp;&nbsp;&nbsp;&nbsp;{{ $t("marketing.reducea") }}</span
            >
            <span v-else
              >&nbsp;&nbsp;&nbsp;&nbsp;{{ $t("marketing.dozen") }}</span
            >
            <el-input
              type="number"
              size="small"
              v-model="discountItem.discount"
              style="width: 200px"
              @change="checkNumber(index, 2)"
            >
              <template slot="append">{{ discountItemTexts[1] }}</template>
            </el-input>
            <el-button type="text" disabled>{{
              dataForm.discountRule < 2
                ? $t("marketing.pleaseThan0")
                : $t("marketing.pleaseEnterTheNumber010")
            }}</el-button>
          </el-form-item>
        </el-card>
      </el-form-item>
      <!-- 卡片 END -->
      <el-form-item>
        <el-button
          plain
          @click="addActivityClass()"
          v-if="dataForm.discountType === 0"
          >{{ $t("addAct") }}</el-button
        >
      </el-form-item>
      <el-form-item
        :label="this.$i18n.t('marketing.maximumDiscountAmount')"
        prop="maxReduceAmount"
        v-if="dataForm.discountRule >= 2 || dataForm.discountType !== 0"
        :rules="[{ required: true, message: $t('publics.noNull') }]"
      >
        <el-input
          type="number"
          v-model="dataForm.maxReduceAmount"
          :placeholder="this.$i18n.t('marketing.maximumDiscountAmount')"
          @change="maxReduceAmountChange"
          :max="9999999999999"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="this.$i18n.t('marketing.applicableProductType')"
        size="mini"
        prop="suitableProdType"
        :rules="[{ required: true, message: $t('publics.noNull') }]"
      >
        <el-radio-group v-model="dataForm.suitableProdType">
          <el-radio :label="0">{{ $t("marketing.allProdsPar") }}</el-radio>
          <el-radio :label="1">{{ $t("marketing.participateInD") }}</el-radio>
          <el-radio :label="2">{{ $t("marketing.specifiedProduct") }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        style="width: 1200px"
        v-if="dataForm.suitableProdType !== 0"
      >
        <el-row>
          <el-col
            :span="3"
            v-for="(discountProd, index) in dataForm.discountProds"
            :key="index"
          >
            <el-card
              :body-style="{ padding: '0px' }"
              style="height: 160px; width: 120px"
            >
              <img :src="discountProd.pic" style="height: 104px; width: 100%" />
              <div class="card-prod-bottom">
                <span class="card-prod-name">{{ discountProd.prodName }}</span>
                <el-button
                  type="text"
                  class="card-prod-name-button"
                  @click="deleteProd(index)"
                  >{{ $t("text.delBtn") }}</el-button
                >
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button
          plain
          v-if="
            dataForm.suitableProdType === 1 || dataForm.suitableProdType === 2
          "
          @click="prodsSelectHandle()"
          >{{ $t("product.select") }}</el-button
        >
      </el-form-item>
      <!-- 商品 -->
      <el-form-item
        :label="this.$i18n.t('product.status')"
        size="mini"
        prop="status"
        v-if="dataForm.status === 1 || dataForm.status === 0"
      >
        <el-radio-group v-model="dataForm.status">
          <el-radio :label="1">{{ $t("groups.turnOn") }}</el-radio>
          <el-radio :label="0">{{ $t("station.close") }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="closeTag()">{{
        $t("crud.filter.cancelBtn")
      }}</el-button>
      <el-button type="primary" size="mini" @click="dataFormSubmit()">{{
        $t("crud.filter.submitBtn")
      }}</el-button>
    </span>
    <!-- 商品选择弹窗-->
    <prods-select
      v-if="prodsSelectVisible"
      ref="prodsSelect"
      :prodType="0"
      @refreshSelectProds="selectDiscountProds"
    ></prods-select>
  </div>
</template>

<script>
// import PicUpload from '@/components/pic-upload'
import ImgUpload from '@/components/img-upload'
import ProdsSelect from '@/components/prods-select'

export default {
  data () {
    var validateTime = (rule, value, callback) => {
      // if (this.dataForm.discountId === 0 && rule.field === 'startTime' && new Date() > Date.parse(value)) {
      //   callback(new Error(this.$i18n.t('groups.activityTimeTime')))
      // }
      // if (this.dataForm.discountId !== 0 && this.dataForm.status === 1 && rule.field === 'startTime' && new Date() > Date.parse(value)) {
      //   callback(new Error(this.$i18n.t('groups.alterActivityTime')))
      // }
      if (this.dataForm.status === 1 && rule.field === 'endTime' && new Date() > Date.parse(value)) {
        callback(new Error(this.$i18n.t('groups.endTime')))
      }
      if (Date.parse(this.dataForm.startTime) >= Date.parse(this.dataForm.endTime)) {
        callback(new Error(this.$i18n.t('groups.endTimeIsTooSmall')))
      } else if (this.dataForm.status === 1 && this.dataForm.groupActivityId && Date.parse(this.validEndTime) > Date.parse(this.dataForm.endTime)) {
        callback(new Error(this.$i18n.t('groups.extendedEndTime')))
      } else {
        callback()
      }
    }
    return {
      dataForm: {
        discountId: 0,
        discountName: '',
        mobilePic: '',
        pcPic: '',
        pcBackgroundPic: '',
        discountRule: 0,
        discountType: 0,
        suitableProdType: 0,
        maxReduceAmount: 0,
        shopId: '',
        startTime: '',
        endTime: '',
        status: 1,
        discountItems: [],
        discountProds: []
      },
      dataRule: {
        mobilePic: [
          { required: true, message: this.$i18n.t('marketing.pleaseUploadAPicture'), trigger: 'blur' }
        ],
        pcPic: [
          { required: true, message: this.$i18n.t('marketing.pleaseUploadAPicture'), trigger: 'blur' }
        ],
        pcBackgroundPic: [
          { required: true, message: this.$i18n.t('marketing.pleaseUploadAPicture'), trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: this.$i18n.t('groups.startTimeCannotBeEmpty'), trigger: 'blur' },
          { validator: validateTime, trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: this.$i18n.t('groups.endTimeCannotBeEmpty'), trigger: 'blur' },
          { validator: validateTime, trigger: 'blur' }
        ]
      },
      prodsSelectVisible: false,
      isTrue: false,
      errorValue: false,
      resourcesUrl: window.SITE_CONFIG.resourcesUrl
    }
  },
  components: {
    ProdsSelect,
    ImgUpload
  },
  computed: {
    discountItemTexts: function () {
      let texts = []
      if (this.dataForm.discountRule === 0 || this.dataForm.discountRule === 2) {
        texts[0] = this.$i18n.t('admin.dollar')
      } else {
        texts[0] = this.$i18n.t('marketing.item')
      }
      if (this.dataForm.discountRule === 0 || this.dataForm.discountRule === 1) {
        texts[1] = this.$i18n.t('admin.dollar')
      } else {
        texts[1] = this.$i18n.t('marketing.fold')
      }
      return texts
    }
  },
  activated () {
    // if (this.$route.query.discountId !== undefined) {
    //   sessionStorage.setItem('discountInfo-params', JSON.stringify(this.$route.query || '{}'))
    // }
    // let sessionStorageParams = JSON.parse(sessionStorage.getItem('discountInfo-params'))
    if (this.$route.query.discountId !== undefined) {
      this.dataForm.discountId = this.$route.query.discountId
    }
    this.getDataList()
  },
  watch: {
    'dataForm.discountRule': function (val) {
      if (val === 2 || val === 3) {
        this.dataForm.discountType = 0
      }
    }
  },
  methods: {
    getDataList () {
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields()
        this.dataForm.discountItems = [{ needAmount: 1, discount: 0.01 }]
      })
      if (this.dataForm.discountId) {
        this.$http({
          url: this.$http.adornUrl(`/admin/discount/info/${this.dataForm.discountId}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          this.dataForm = data
        })
      }
    },
    /**
     * 活动类型变化时，更新优惠内容的值
     */
    changeDiscountRule () {
      for (var i = 0; i < this.dataForm.discountItems.length; i++) {
        this.checkNumber(i, 1)
        this.checkNumber(i, 2)
      }
    },
    /**
     * 输入框的数据改变时，对值进行校验
     * type 1:验证needAmount(满足使用条件需要达到的金额） 2：验证discount（优惠金额）
     */
    checkNumber (index, type) {
      var discountItem = this.dataForm.discountItems[index]
      // item.needAmount <= item.discount
      if (type === 1) {
        if (discountItem.needAmount < 1) {
          discountItem.needAmount = 1
        }
        discountItem.needAmount = Math.round(discountItem.needAmount)
      }
      if (type === 2) {
        // 如果小于最小值
        if (discountItem.discount < 0.01 && this.dataForm.discountRule < 2) {
          discountItem.discount = 0.01
        }
        if (discountItem.discount < 0.1 && this.dataForm.discountRule >= 2) {
          discountItem.discount = 0.1
        }
        if (discountItem.discount >= 10 && this.dataForm.discountRule >= 2) {
          // 如果折扣大于10
          discountItem.discount = 9.9
        } else if (this.dataForm.discountRule < 2) {
          // 优惠金额保留两位小数
          discountItem.discount = parseFloat(discountItem.discount).toFixed(2)
        } else {
          // 保留一位小数
          discountItem.discount = parseFloat(discountItem.discount).toFixed(1)
          discountItem.discount = discountItem.discount >= 10 ? 9.9 : discountItem.discount
        }
      }
    },
    /**
     * 优惠金额上限校验
     */
    maxReduceAmountChange () {
      let maxReduceAmount = Math.round(this.dataForm.maxReduceAmount)
      this.dataForm.maxReduceAmount = maxReduceAmount < 1 ? 1 : maxReduceAmount
      this.dataForm.maxReduceAmount = maxReduceAmount > 9999999999999 ? 9999999999999 : maxReduceAmount
    },

    /**
     * 减免类型选择时，更新数据
     */
    discountTypeChange () {
      this.dataForm.discountItems = [this.dataForm.discountItems[0]]
    },
    // 添加活动层级
    addActivityClass () {
      this.dataForm.discountItems.push({})
    },
    // 删除活动层级
    deleteActivityClass (index) {
      this.dataForm.discountItems.splice(index, 1)
    },
    // 删除指定商品
    deleteProd (index) {
      this.dataForm.discountProds.splice(index, 1)
    },
    // 显示添加指定商品弹框
    prodsSelectHandle () {
      this.prodsSelectVisible = true
      this.$nextTick(() => {
        this.$refs.prodsSelect.init(this.dataForm.discountProds)
      })
    },
    // 添加指定商品
    selectDiscountProds (prods) {
      if (prods) {
        this.dataForm.discountProds = prods
      }
    },
    // 关闭当前标签页
    closeTag () {
      // this.$store.commit('common/removeMainActiveTab')
      this.$router.go(-1)
    },
    /**
     * 错误提示框
     */
    errorMsg (message) {
      this.$message({
        message: message,
        type: 'error',
        duration: 1500
      })
    },
    /**
     * 校验优惠内容是否正确
     */
    checkDiscountItems () {
      this.isTrue = false
      // if (this.dataForm.discountItems.length === 0) {
      //   this.isTrue = true
      //   this.errorValue = '活动项不能为空，最少要有一个活动项'
      //   return true
      // }
      var minAmount = this.dataForm.discountItems[0].discount
      var maxAmount = this.dataForm.discountItems[0].discount
      var amount = 0
      var index = 1
      this.dataForm.discountItems.forEach(item => {
        if (this.dataForm.discountType === 0 && item.needAmount <= amount) {
          this.isTrue = true
          this.errorValue = this.$i18n.t('marketing.activityLevel') + index + this.$i18n.t('marketing.theConditierThan') + amount
          return true
        }
        amount = item.needAmount
        index = index + 1
        if (this.dataForm.discountRule === 0) {
          if (item.needAmount <= item.discount) {
            this.isTrue = true
            this.errorValue = this.$i18n.t('marketing.activimount')
            return true
          }
        }
        if (!item.needAmount) {
          console.log('item.needAmount', item)
          this.isTrue = true
          this.errorValue = this.$i18n.t('marketing.activitytBeEmpty')
          return true
        }
        if (!item.discount) {
          console.log('item.discount', item)
          this.isTrue = true
          this.errorValue = this.$i18n.t('marketing.promotioBeEmpty')
          return true
        }
        minAmount = item.discount < minAmount ? item.discount : minAmount
        maxAmount = item.discount > maxAmount ? item.discount : maxAmount
      })
      // 活动类型：满钱减钱 => 减免类型：按满足最高层减一次 => 优惠金额上限为最大金额
      if (this.dataForm.discountRule === 0 && this.dataForm.discountType === 0) {
        this.dataForm.maxReduceAmount = maxAmount
      }
      if (this.dataForm.discountRule < 2 && this.dataForm.discountType === 0) {
        this.dataForm.maxReduceAmount = maxAmount
      } else if (this.dataForm.discountRule < 2 && this.dataForm.discountType === 1) {
        if (this.dataForm.maxReduceAmount < minAmount) {
          this.isTrue = true
          this.errorValue = this.$i18n.t('marketing.maximumDiscountAmountBig')
          return true
        }
      }
      if (this.dataForm.suitableProdType !== 0 && this.dataForm.discountProds.length < 1) {
        this.isTrue = true
        this.errorValue = this.$i18n.t('marketing.pleaseSelectAProduct')
        return true
      }
    },
    // 表单提交
    dataFormSubmit () {
      this.checkDiscountItems()
      if (this.isTrue) {
        this.errorMsg(this.errorValue)
        return
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.dataForm.endTime < this.dataForm.startTime) {
            this.errorMsg(this.$i18n.t('marketing.eventEndanStartTime'))
            return
          }
          console.log('sasa', this.dataForm.discountItems)

          if (Number(this.dataForm.discountItems[0].discount) === 0.0 || Number(this.dataForm.discountItems[0].discount) === 0) {
            this.$message.error(this.$i18n.t('marketing.discountNoZero'))
            return
          }
          this.$http({
            url: this.$http.adornUrl(`/admin/discount`),
            method: this.dataForm.discountId ? 'put' : 'post',
            data: this.$http.adornData({
              'discountId': this.dataForm.discountId || undefined,
              'shopId': this.dataForm.shopId,
              'discountName': this.dataForm.discountName,
              'mobilePic': this.dataForm.mobilePic,
              'pcPic': this.dataForm.pcPic,
              'pcBackgroundPic': this.dataForm.pcBackgroundPic,
              'discountRule': this.dataForm.discountRule,
              'discountType': this.dataForm.discountType,
              'suitableProdType': this.dataForm.suitableProdType,
              'maxReduceAmount': this.dataForm.maxReduceAmount,
              'startTime': this.dataForm.startTime,
              'endTime': this.dataForm.endTime,
              'status': this.dataForm.status,
              'discountItems': this.dataForm.discountItems,
              'discountProds': this.dataForm.discountProds
            })
          }).then(({ data }) => {
            this.$message({
              message: this.$i18n.t('publics.operation'),
              type: 'success',
              duration: 1500,
              onClose: () => {
                // this.$store.commit('common/removeMainActiveTab')
                this.$router.go(-1)
              }
            })
          })
        }
      })
    }
  }
}
</script>
<style lang="scss">
.mod-discountInfo {
}
.pleaseEnteThan {
  word-break:break-word; 
  color: #C0C4CC;
}
</style>
